<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../js/layui/css/layui.css">
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="./circle-progress.js"></script>
    <script src="../js/layui/layui.js"></script>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/analysis.css">
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script src="../js/distpicker.min.js"></script>
    <title>数据分析</title>
    <style>

    </style>

</head>

<body>
    <div class="analysis layui-row">
        <div class="layui-col-md2">

        </div>
        <div class="layui-col-md10 analysis-right">
            <div class="analysis-right-header-box">
                <div class="analysis-right-header-item">
                    <div>
                        <p>总设备数</p>
                        <p>170/213</p>
                    </div>
                    <div>
                        <div id="circle" class="circle-press">
                            <strong></strong>
                        </div>
                    </div>
                </div>
                <div class="analysis-right-header-item">
                    <div>
                        <p>泉州设备数</p>
                        <p>80/113</p>
                    </div>
                    <div>
                        <div id="circle2" class="circle-press">
                            <strong></strong>
                        </div>
                    </div>
                </div>
                <div class="analysis-right-header-item">
                    <div>
                        <p>福州设备数</p>
                        <p>80/100</p>
                    </div>
                    <div>
                        <div id="circle3" class="circle-press">
                            <strong></strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-content-between">
                <form class="layui-form " style='width:100%;' action="">
                    <div class="flex justify-content-between seach-time">
                        <div class="flex seach-time-item justify-content-start">
                            <input type="text" class="layui-input" placeholder="搜索设备名称">
                            <input type="text" class="layui-input" placeholder="搜索地址">
                        </div>
                        <div class="layui-block flex justify-content-center seach-time-item">
                            <input type="text" class="layui-input" id="startTime" required lay-verify="required" placeholder="开始时间">
                            <input type="text" class="layui-input" id="endTime" required lay-verify="required" placeholder="结束时间">
                        </div>
                    </div>
                    <div class="flex justify-content-between ">
                        <div id='target' class="flex justify-content-between seach-select">
                            <select name="province" required lay-verify="required" lay-verify="">
                                    <option value="">省</option>
                                    <option value="010">layer</option>
                                    <option value="021">form</option>
                                    <option value="0571">layim</option>
                                </select>
                            <select name="city" required lay-verify="required" lay-verify="">
                                        <option value="">市</option>
                                        <option value="010">layer</option>
                                        <option value="021">form</option>
                                        <option value="0571">layim</option>
                                    </select>
                            <select name="district" required lay-verify="required" lay-verify="">
                                            <option value="">点位</option>
                                            <option value="010">layer</option>
                                            <option value="021">form</option>
                                            <option value="0571">layim</option>
                                        </select>
                            <select name="device" required lay-verify="required" lay-verify="">
                                <option value="">设备</option>
                                <option value="010">layer</option>
                                <option value="021">form</option>
                                <option value="0571">layim</option>
                            </select>
                        </div>
                        <div class="flex justify-content-between seach-select">
                            <select name="site" required lay-verify="required" lay-verify="">
                                        <option value="">场地类型</option>
                                        <option value="010">layer</option>
                                        <option value="021">form</option>
                                        <option value="0571">layim</option>
                                    </select>
                            <select name="deviceType" required lay-verify="required" lay-verify="">
                                            <option value="">设备类型</option>
                                            <option value="010">layer</option>
                                            <option value="021">form</option>
                                            <option value="0571">layim</option>
                                        </select>
                            <select name="factory" required lay-verify="required" lay-verify="">
                                                <option value="">选择工厂</option>
                                                <option value="010">layer</option>
                                                <option value="021">form</option>
                                                <option value="0571">layim</option>
                                            </select>
                            <select name="branchOffice" required lay-verify="required" lay-verify="">
                                    <option value="">选择分公司</option>
                                    <option value="010">layer</option>
                                    <option value="021">form</option>
                                    <option value="0571">layim</option>
                                </select>
                        </div>
                        <div class="flex justify-content-start seach-btn">
                            <button class="layui-btn layui-btn-danger" lay-submit lay-filter="formDemo">搜索</button>
                            <button class="layui-btn layui-btn-danger" type="reset">重置</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="line-box">
                <div class="flex justify-content-start line-header">
                    <div class="title-active">今日</div>
                    <div>本周</div>
                    <div>本月</div>
                </div>
                <div class="line-right flex justify-content-between">
                    <div id="line" style="height:400px;width: 80%;">

                    </div>
                    <div class="ranking">
                        <div class="ranking-title">TOP前十排行榜</div>

                        <div class="ranking-content">
                            <ul>
                                <li>
                                    <span class='circle'>1</span>
                                    <span>厦门大学</span>
                                </li>
                                <li>
                                    <span class='circle'>2</span>
                                    <span>泉州中医院</span>
                                </li>
                                <li>
                                    <span class='circle'>3</span>
                                    <span>眼科中心</span>
                                </li>
                                <li>
                                    <span class='circle'>4</span>
                                    <span>DYCB123456</span>
                                </li>
                                <li>
                                    <span class='circle'>5</span>
                                    <span>DYCB123456</span>
                                </li>
                                <li>
                                    <span class='circle'>6</span>
                                    <span>DYCB123456</span>
                                </li>
                                <li>
                                    <span class='circle'>7</span>
                                    <span>DYCB123456</span>
                                </li>
                                <li>
                                    <span class='circle'>8</span>
                                    <span>DYCB123456</span>
                                </li>
                                <li>
                                    <span class='circle'>9</span>
                                    <span>DYCB123456</span>
                                </li>
                                <li>
                                    <span class='circle'>10</span>
                                    <span>DYCB123456</span>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <div class="gauge">
                <div class="title">
                    <span>设备故障情况</span>
                </div>
                <div class="flex flex-column aligin-item-center justify-content-around dash-board flex-wrap">
                    <div class="flex justify-content-start line-header">
                        <div class="title-active">今日</div>
                        <div>本周</div>
                        <div>本月</div>
                    </div>
                    <div class="line-echarts flex flex-row justify-content-between">
                        <div id="columnar" style="height:400px;width: 80%;">
                        </div>
                        <div class="ranking">
                            <!-- <div class="ranking-title">故障前十排行榜</div> -->
                            <div class="ranking-content">
                                <div class="layui-tab">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this" style="color: black;">故障前十排行榜</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show">
                                            <ul>
                                                <li>
                                                    <span class='circle'>1</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>2</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>3</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>4</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>5</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>6</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>7</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>8</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>9</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>10</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="" style="height:400px;width: 80%;" id='pie'></div>
                </div>

            </div>
            <div class="gauge">
                <div class="title">
                    <span>产品销售情况</span>
                </div>
                <div class="flex flex-column aligin-item-center justify-content-around dash-board flex-wrap">
                    <div class="flex justify-content-start line-header">
                        <div class="title-active">今日</div>
                        <div>本周</div>
                        <div>本月</div>
                    </div>
                    <div class="line-echarts flex flex-row justify-content-between">
                        <div id="columnarXiaoLiang" style="height:400px;width: 80%;">
                        </div>
                        <div class="ranking">
                            <!-- <div class="ranking-title">TOP产品销量排行榜</div> -->

                            <div class="ranking-content">
                                <div class="layui-tab">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this" style="color: black;">TOP产品销量排行榜</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show">
                                            <ul>
                                                <li>
                                                    <span class='circle'>1</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>2</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>3</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>4</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>5</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>6</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>7</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>8</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>9</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                                <li>
                                                    <span class='circle'>10</span>
                                                    <span>DYCB123456</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div id="category" style="height:400px;width: 80%;"></div>
                </div>

            </div>
        </div>
    </div>
</body>
<script>
    var gradient = ["#00CED1", "#00CED1"];
    $('#circle').circleProgress({
        value: 0.75,
        size: 120,
        fill: {
            gradient: gradient
        }
    }).on('circle-animation-progress', function(event, progress, stepValue) {
        // console.log(stepValue)
        $(this).find('strong').html(parseInt(stepValue.toFixed(2) * 100) + '<i>%</i>');
    });
    $('#circle2').circleProgress({
        value: 0.45,
        size: 120,
        fill: {
            gradient: gradient
        }
    }).on('circle-animation-progress', function(event, progress, stepValue) {
        // console.log(stepValue)
        $(this).find('strong').html(parseInt(stepValue.toFixed(2) * 100) + '<i>%</i>');
    });
    $('#circle3').circleProgress({
        value: 0.65,
        size: 120,
        fill: {
            gradient: gradient
        }
    }).on('circle-animation-progress', function(event, progress, stepValue) {
        // console.log(stepValue)
        $(this).find('strong').html(parseInt(stepValue.toFixed(2) * 100) + '<i>%</i>');
    });
</script>
<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('line'));
    var option = {
        tooltip: {
            trigger: 'axis',
        },
        title: {
            text: '营业额趋势'
        },
        color: ['#EEB422', '#90EE90'],
        legend: {
            data: ['销售额', '销量']
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            //设置轴线的属性
            axisLine: {
                lineStyle: {
                    color: '#ddd',
                    width: 1, //这里是为了突出显示加上的
                }
            },
            data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
        }],
        yAxis: [{
            type: 'value',
            //设置轴线的属性
            axisLine: {
                lineStyle: {
                    color: '#ddd',
                    width: 1, //这里是为了突出显示加上的
                }
            }
        }],
        series: [{
            name: '销售额',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210, 300, 400, 11, 130, 132, 456]
        }, {
            name: '销量',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210, 300, 400, 56, 65, 546, 45]
        }]
    };
    myChart.setOption(option);
</script>
<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('columnar'));
    var option = {
        // title: {
        //     text: '某地区蒸发量和降水量',
        //     subtext: '纯属虚构'
        // },
        color: ['#48D1CC'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['故障数']
        },
        // toolbox: {
        //     show: true,
        //     feature: {
        //         mark: {
        //             show: true
        //         },
        //         dataView: {
        //             show: true,
        //             readOnly: false
        //         },
        //         magicType: {
        //             show: true,
        //             type: ['line', 'bar']
        //         },
        //         restore: {
        //             show: true
        //         },
        //         saveAsImage: {
        //             show: true
        //         }
        //     }
        // },
        dataZoom: {
            show: true,
            start: 0,
            end: 100
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            data: ['001', '002', '003', '004', '005', '006', '007', '008', '009', '010', '011', '012', '013', '014', '015', '016', '017', '018', '019', '020', '021', '022', '023', '024', '025']
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '故障数',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 3.3, 3.3, 3.3, 3.3, 3.3, 3.3, 3.3, 3.3, 162.2, 32.6, 20.0, 6.4, 162.2, 32.6, 20.0, 6.4],
            itemStyle: {
                emphasis: {
                    barBorderRadius: 5
                },
                normal: {
                    barBorderRadius: 5
                }
            }
            // markPoint: {
            //     data: [{
            //         type: 'max',
            //         name: '最大值'
            //     }, {
            //         type: 'min',
            //         name: '最小值'
            //     }]
            // },
            // markLine: {
            //     data: [{
            //         type: 'average',
            //         name: '平均值'
            //     }]
            // }
        }, ]
    };
    myChart.setOption(option);
</script>
<script>
    var myDate = new Date();
    var dateStr = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate();
    console.log(myDate)
    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
                ,
            min: '2017-1-1',
            max: dateStr
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#endTime' //指定元素
                ,
            min: '2017-1-1',
            max: dateStr
        });
    });
</script>
<!-- //饼状图 -->
<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('pie'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: ['通讯故障', '咖啡机通讯故障', '无杯子故障', '取杯电机故障', '其他故障']
        },
        toolbox: {
            // show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 220,
                        }
                    }
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        series: [{
            name: '故障信息',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        position: 'center',
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            data: [{
                value: 2,
                name: '通讯故障'
            }, {
                value: 10,
                name: '咖啡机通讯故障'
            }, {
                value: 30,
                name: '无杯子故障'
            }, {
                value: 5,
                name: '取杯电机故障'
            }, {
                value: 7,
                name: '其他故障'
            }]
        }]
    };
    myChart.setOption(option);
</script>
<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('columnarXiaoLiang'));
    var option = {
        // title: {
        //     text: '某地区蒸发量和降水量',
        //     subtext: '纯属虚构'
        // },
        color: ['#48D1CC'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['销量']
        },
        // toolbox: {
        //     show: true,
        //     feature: {
        //         mark: {
        //             show: true
        //         },
        //         dataView: {
        //             show: true,
        //             readOnly: false
        //         },
        //         magicType: {
        //             show: true,
        //             type: ['line', 'bar']
        //         },
        //         restore: {
        //             show: true
        //         },
        //         saveAsImage: {
        //             show: true
        //         }
        //     }
        // },
        dataZoom: {
            show: true,
            start: 0,
            end: 100
        },
        calculable: true,
        xAxis: [{
            type: 'category',
            data: ['洛神花茶', '红糖姜茶', '橘皮普洱', '菊花清茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', ]
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '销量',
            type: 'bar',
            data: [100, 100, 1222, 166, 464, 1656, 4654, 4613, 461, 313, 1313, 1231, 4484, 1310, 3131, 464, 1313, 464, 1313],
            itemStyle: {
                emphasis: {
                    barBorderRadius: 5
                },
                normal: {
                    barBorderRadius: 5
                }
            }
            // markPoint: {
            //     data: [{
            //         type: 'max',
            //         name: '最大值'
            //     }, {
            //         type: 'min',
            //         name: '最小值'
            //     }]
            // },
            // markLine: {
            //     data: [{
            //         type: 'average',
            //         name: '平均值'
            //     }]
            // }
        }, ]
    };
    myChart.setOption(option);
</script>

<script>
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('category'));
    var option = {
        title: {
            x: 'center',
            text: '产品销量',
        },
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            // show: true,
            // feature: {
            //     dataView: {
            //         show: true,
            //         readOnly: false
            //     },
            //     restore: {
            //         show: true
            //     },
            //     saveAsImage: {
            //         show: true
            //     }
            // }
        },
        calculable: true,
        grid: {
            borderWidth: 0,
            y: 80,
            y2: 60
        },
        xAxis: [{
            type: 'category',
            show: false,
            data: ['洛神花茶', '红糖姜茶', '橘皮普洱', '菊花清茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', '奶茶', ]
        }],
        yAxis: [{
            type: 'value',
            show: false
        }],
        series: [{
            name: '产品销量',
            type: 'bar',
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                            '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }
                }
            },
            data: [100, 100, 1222, 166, 464, 1656, 4654, 4613, 461, 313, 1313, 1231, 4484, 1310, 3131, 464, 1313, 464, 1313],
        }]
    };
    myChart.setOption(option);
</script>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function() {
        var element = layui.element;

        //…
    });
    //Demo
    layui.use('form', function() {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>

</html>